<template>
    <Card>
        <p slot="title">管理列表</p>

        <div class="search-con search-con-top">

            昵称：
            <Input v-model="searchData.nick" style="width: 200px"></Input>
            账号：
            <Input v-model="searchData.username" style="width: 200px"></Input>
            <!-- 手机号：
            <Input v-model="searchData.phone" style="width: 200px"></Input> -->
            角色：
            <Select v-model="searchData.role_id" style="width:200px">
                <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.role_name }}</Option>
            </Select>
            <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
            <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
            <showRule name="addAccountBtn">
                <Button @click="showAddDrawer" type="info" style="margin-left: 10px;">添加账号</Button>
            </showRule>
        </div>
        <br>

        <Table :columns="columns" :data="list" border>
            <template slot-scope="{ row , index}" slot="statusSlot">
                <i-switch :value="!row.status" @on-change="statusChange(row.id, row.status)" v-show="row.id !== 1" />
            </template>
            <template slot-scope="{ row , index}" slot="memberSlot">
                <showRule name="editAccountBtn">
                    <i-button type="primary" size="small" @click="edit(row)" v-if="row.id !== 1">编辑</i-button>
                </showRule>
                <i-button type="error" size="small" @click="showDelModal(row.id)" v-if="row.id !== 1"
                    style="margin-left: 10px;">删除</i-button>
            </template>
        </Table>
        <br>
        <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
        </Page>
        <!-- 添加管理员抽屉 -->
        <Drawer title="添加账号" :closable="false" width="40" v-model="showAdd" @on-close="drawClose">
            <Form ref="formValidate" :model="adminUserInfo" :rules="ruleInline" :label-width="100">
                <FormItem label="用户昵称" prop="nick">
                    <Input v-model="adminUserInfo.nick" placeholder="请输入昵称"></Input>
                </FormItem>
                <FormItem label="用户头像">
                    <Upload ref="upload" name="image" :headers="header" :action="action_url" :show-upload-list="false"
                        :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError" :on-success="handleSuccess">
                        <Button icon="ios-cloud-upload-outline">点击上传</Button>
                    </Upload>
                </FormItem>
                <FormItem class="item">
                    <img :src="imgUrl" style="width: 100px;height: 100px;" v-show="imgUrl != ''">
                </FormItem>
                <FormItem label="登录账号" prop="username">
                    <Input v-model="adminUserInfo.username" placeholder=""></Input>
                </FormItem>
                <FormItem label="登录密码" prop="password">
                    <Input v-model="adminUserInfo.password" placeholder="*******"></Input>
                    <Alert type="error">如果不修改密码 请留空</Alert>
                </FormItem>
                <FormItem label="用户角色" prop="role_id">
                    <RadioGroup v-model="adminUserInfo.role_id">
                        <Radio v-for="item in roleList" :label="item.id">{{ item.role_name }}</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="所属店铺">
                    <Select v-model="adminUserInfo.shop_id" filterable>
                        <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.shop_name }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="adminUserAdd()">提交</Button>
                </FormItem>
            </Form>
        </Drawer>
        <Modal title="警告" v-model="delModal" @on-ok="delAdminUser()" class-name="vertical-center-modal">
            <p>您确定要删除该用户吗？此操作不可逆！</p>
        </Modal>
    </Card>
</template>

<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    data() {
        const validPass = (rule, value, callback) => {
            if (this.adminUserInfo.id !== 0) {
                callback();
            }
            if (value === "") {
                callback(new Error("密码不能为空"));
            }
            callback();
        };
        return {
            action_url: baseUrl + "/admin/image/upload",
            header: { token: getToken() },
            imgUrl: "",
            roleId: 0,
            selectRoleId: 0,
            searchData: {
                page: 1,
                limit: 10
            },
            // 列表
            columns: [
                // {
                //     title: "ID",
                //     key: "id",
                //     minWidth: 50,
                //     maxWidth: 100,
                // },
                {
                    title: "昵称",
                    key: "nick",
                    minWidth: 100,
                },
                {
                    title: "头像",
                    key: "avatar",
                    minWidth: 100,
                    render: (h, param) => {
                        return h("img", {
                            attrs: {
                                src: param.row.avatar
                            },
                            style: {
                                width: "50px"
                            }
                        });
                    }
                },
                {
                    title: "登陆账号",
                    key: "username",
                    minWidth: 100,
                },
                {
                    title: "角色",
                    key: "role_name",
                    minWidth: 100
                },
                // {
                //     title: "启用/禁用",
                //     key: "role_name",
                //     slot: "statusSlot"
                // },
                {
                    title: "操作",
                    key: "make",
                    slot: "memberSlot",
                    minWidth: 100,
                },
            ],
            // 数据
            list: [],
            total: 0,
            showAdd: false,
            delModal: false,
            delUserId: "",
            // 管理信息
            adminUserInfo: {
                id: 0,
                nick: "",
                username: "",
                password: "",
                role_id: 1,
                avatar: "",
                shop_id: 1,
            },
            ruleInline: {
                nick: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
                username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
                // password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
                password: [{ required: true, validator: validPass, trigger: "blur" }],
                phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
                role_id: [{ required: true, message: "请选择用户角色", trigger: "blur", type: "number" }],
            },
            // 角色列表
            roleList: [],
            shopList: [],
            //省列表
            provinceList: [],
            //市列表
            cityList: [],
            //区县列表
            areaList: [],
            operatorList: [],
            BDMList: [],
            driverClassList: [],
            operatorId: ""
        };
    },
    methods: {
        search() {
            this.searchData.page = 1;
            this.getAdminUserList();
        },
        reset() {
            this.searchData = {
                page: 1,
                limit: 10,
            };
            this.getAdminUserList();
        },
        // 查询管理员信息
        getAdminUserList() {
            let params = {
                ...this.searchData,
            };
            this.$axios("/admin/user/getUserList", params).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        //打开添加管理员抽屉 获取角色列表
        showAddDrawer() {
            this.showAdd = true;
            // this.$axios('/adminrole/getRoleList', {}).then(res => {
            //     this.roleList = res;
            // });
            // this.getOperatorList();
        },
        // 添加管理员
        adminUserAdd() {
            this.$refs["formValidate"].validate(valid => {
                if (valid) {
                    this.$axios("/admin/user/add", this.adminUserInfo).then(res => {
                        this.showAdd = false;
                        this.getAdminUserList();
                    });
                }
            });
        },
        //删除确认框
        showDelModal(id) {
            this.delModal = true;
            this.delUserId = id;
        },
        // 禁用
        delAdminUser() {
            this.$axios("user/del", { id: this.delUserId }).then(res => {
                this.$Message.success("删除成功");
                this.getAdminUserList();
            });
        },
        drawClose() {
            this.adminUserInfo = {};
        },
        // 启用，禁用
        statusChange(id, status) {
            this.$axios("user/status", { id: id, status: status }).then(res => {
                this.getAdminUserList();
            });
        },
        // 编辑
        edit(info) {
            this.adminUserInfo.id = info.id;
            this.adminUserInfo.nick = info.nick;
            this.adminUserInfo.username = info.username;
            this.adminUserInfo.phone = info.phone;
            this.adminUserInfo.role_id = info.role_id;
            this.adminUserInfo.operator_id = info.operator_id;
            this.adminUserInfo.avatar = info.avatar;
            this.adminUserInfo.bdm_id = info.pid;
            this.adminUserInfo.driver_id = info.pid;
            this.selectRoleId = info.role_id;
            // this.imgUrl = info.avatar;
            this.showAddDrawer();
        },
        // 获取角色列表
        getRoleList() {
            this.$axios("/admin/role/getRoleList", {}).then(res => {
                this.roleList = res;
            });
        },
        getShopList() {
            this.$axios("/admin/shop/getShopList", {}).then(res => {
                this.shopList = res;
            });
        },
        handleSuccess(res, file) {
            this.adminUserInfo.avatar = res.data;
            this.imgUrl = res.data;
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
        changePage(page) {
            this.searchData.page = page;
            this.getAdminUserList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getAdminUserList();
        },
    },
    created() {
        this.roleId = localStorage.getItem("roleId");
        this.getAdminUserList();
        this.getRoleList();
        this.getShopList();
    },
}
</script>
<style></style>
